import { defineComponent, reactive, ref } from "vue";
import ProductCateService from "./productCate.service";
import { tablesInterface } from "@/common/interface/table.interface";
import TablePage from "@/components/TablePage/TablePage";
import Add from "./Add/Add";

export default defineComponent({
  name: 'productCate',
  setup() {
    const tablePageRef = ref(null as any)
    const productCateService = new ProductCateService();
    const table = reactive({
      list: [
        {
          title: "产品分类",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "分类名称",
              dataIndex: "chineseName",
              align: "center",
              width: "280px",
            },
            {
              title: "分类英文名称",
              dataIndex: "englishName",
              align: "center",
              width: "280px",
            },
            {
              title: "上级分类名称",
              dataIndex: "pname",
              align: "center",
              width: "280px",
            },
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter"],
            add: {
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {},
          service: productCateService,
          operation: ({ record }) => [
            {
              type: "edit",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', id: record.id });
              }
            },
            {
              type: "delete",
              clickHandler: "delete",
            },
          ],
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={() => { tablePageRef.value.reload() }} />
            }
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ]
    } as tablesInterface)
    const config = reactive({
      table: table.list[0]
    })
    return () => (
      // <div>产品分类</div>
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})